<template>
  <div class="mod-table">
    <div class="hd">{{ title }}</div>
    <div class="bd">
      <table class="table">
        <thead>
          <tr>
            <template v-for="column in columns">
              <th :key="column.dataKey">{{ column.title }}</th>
            </template>
          </tr>
        </thead>
        <tbody>
          <template v-for="(item, i) in data">
            <tr :key="i">
              <template v-for="column in columns">
                <td :key="column.dataKey">
                  {{ item[column.dataKey] }}
                </td>
              </template>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    }
  },
  setup() {}
};
</script>

<style scoped></style>
